<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	<title>修改姓名</title>
	<meta name="keywords" content="">
	<meta name="description" content="">
	<script src="js/rem.js"></script>
	<script src="js/jquery.min.js" type="text/javascript"></script>
	<link rel="stylesheet" type="text/css" href="css/base.css"/>
	<link rel="stylesheet" type="text/css" href="css/page.css"/>
	<link rel="stylesheet" type="text/css" href="css/all.css"/>
	<link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
	<link rel="stylesheet" type="text/css" href="css/loaders.min.css"/>
	<link rel="stylesheet" type="text/css" href="css/loading.css"/>
	<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
	<link rel="stylesheet" type="text/css" href="css/mui.picker.min.css"/>
	<link href="css/mui.picker.css" rel="stylesheet"/>
	<script type="text/javascript">
		$(window).load(function () {
			$(".loading").addClass("loader-chanage")
			$(".loading").fadeOut(300)
		})
	</script>
</head>
<!--loading页开始-->
<div class="loading">
	<div class="loader">
		<div class="loader-inner pacman">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
	</div>
</div>
<!--loading页结束-->
<body>
<!--header star-->
<header class="mui-bar mui-bar1 mui-bar-nav mui-bar-nav1" id="header">
	<a class="btn" href="javascript:history.go(-1)">
		<i class="iconfont icon-fanhui"></i>
	</a>
	<div class="top-sch-box top-sch-boxtwo top-sch-boxthree flex-col">
		返回
	</div>
</header>
<!--header end-->

<div class="warp warpthree clearfloat">
	<div class="h-top h-toptwo clearfloat box-s">
		<p class="tu"><img id="avatar-img" style="border-radius:50%" src="img/touxiang.png"/></p>
		<p class="nr loginname">王小王<span>普通会员</span></p>
	</div>
	<div class="apply recharge clearfloat">
		<div class="appxiugai clearfloat">
			<ul>
				<li class="ra3 fl">
					<i class="iconfont icon-iconfontxingming fl"></i>
					<input type="text" name="" id="fullname" value="" placeholder="长度为6至12个汉字"/>
				</li>
				<li class="ra3 fl">
					<i class="iconfont icon-shouji fl"></i>
					<input type="text" name="" id="htel" value="" placeholder="长度为6至11个数字"/>
				</li>
				<li class="ra3 fl">
					<i class="iconfont icon-sousuo fl"></i>
					<input type="file" name="" id="avatar_change" accept="image/png"/>
					<input type="hidden" id="avatar_data" value="">
					<input type="hidden" id="avatar_name" value="">
				</li>
			</ul>
		</div>
		<div class="xia clearfloat">
			<a href="#" class="db fl btn ra3 update_user">确定</a>
			<a href="center.html" class="db fr btn ra3">取消</a>
		</div>
	</div>
</div>

<!--footer star-->
<footer class="page-footer fixed-footer" id="footer">
	<ul>
		<li>
			<a href="index.html">
				<i class="iconfont icon-shouye"></i>
				<p>商城</p>
			</a>
		</li>
		<li>
			<a href="#">
				<i class="iconfont icon-erweima1"></i>
				<p>二维码</p>
			</a>
		</li>
		<li>
			<a href="#">
				<i class="iconfont icon-kefu1"></i>
				<p>客服</p>
			</a>
		</li>
		<li class="active">
			<a id="center_link" href="login.html">
				<i class="iconfont icon-yonghuming"></i>
				<p>我的</p>
			</a>
		</li>
	</ul>
</footer>
<!--footer end-->
</body>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script src="js/mui.min.js"></script>
<script src="js/mui.picker.min.js"></script>
<script src="js/others.js"></script>
<script type="text/javascript" src="js/hmt.js"></script>
<script src="slick/slick.js" type="text/javascript"></script>
<!--插件-->
<link rel="stylesheet" href="css/swiper.min.css">
<script src="js/swiper.jquery.min.js"></script>

<script>



	$(function () {

		avatar_change.onchange = function () {
			var rander = new FileReader()
			if (this.files[0].type == "image/png") {
				avatar_name.value = this.files[0].name
				rander.readAsDataURL(this.files[0])
				rander.onload = () => avatar_data.value = rander.result
			}

			// console.log(avatar_name.value)
			// console.log(avatar_data.value)
			// console.log(rander.result)

		}



		$.get("/users/getUserInfo", function (result) {
			if (result.state == 1000) {
				let user = result.user;
				// $("#hname").val(user.username)
				$(".loginname").text(user.username)
				$("#fullname").val(user.usernameFull)
				$("#htel").val(user.phone)
				$("#avatar-img").attr("src", user.avatar)
			} else {
				window.location.href = "login.html";
			}
		});

		$(".update_user").click(function () {

			var usernameFull = $("#fullname").val()
			var phone = $("#htel").val()
			var imageData = $("#avatar_data").val()
			var imageName = $("#avatar_name").val()

			var params = {
				usernameFull: usernameFull,
				phone: phone,
				imageData: imageData,
				imageName:imageName,
			}

			$.post("/users/updateUserInfo", params, function (result) {
				// 处理响应数据
				if (result.state == 1000) { // 正常响应
					window.location.href = "center.html";
				} else { // 异常响应
					alert(result.msg);
				}
			});
		})
	});


	$("#center_link").click(function (event) {
		event.preventDefault();

		$.post("/users/checkLogin", function (result) {
			if (result.state == 1000) {
				window.location.href = "center.html";
			} else {
				window.location.href = "login.html";
			}
		});
	});


	//压缩图片转成base64
	// function getBase64Image(img){
	// 	var canvas=document.createElement("canvas");
	// 	var width=img.width;
	// 	var height=img.height;
	// 	if(width>height){
	// 		if(width>100){
	// 			height=Math.round(height*=100/width);
	// 			width=100;
	// 		}
	// 	}else{
	// 		if(height>100){
	// 			width=Math.round(width*=100/height);
	// 		}
	// 		height=100;
	// 	}
	//
	// 	canvas.width=width;
	// 	canvas.height=height;
	// 	var ctx=canvas.getContext('2d');
	// 	ctx.drawImage(img,0,0,width,height);
	//
	// 	var dataUrl=canvas.toDataURL('image/png',0.8);
	// 	return dataUrl.replace('data:image/png:base64,','');
	// }
</script>
</html>